{include file="common/head"}
<script>
    document.title = "{$userData.profile.nickname} | {:config('system.base.title')} "
</script>
<link rel="stylesheet" href="__css__/index/category/index.css">
<link rel="stylesheet" href="__css__/index/category/detail.css">
<link rel="stylesheet" href="__css__/index/article/comment.css">
<link rel="stylesheet" href="__css__/index/account/index.css">
<style>
    .bg {
        width: 100%;
        height: 200px;
    }

    .navbar {
        background-color: rgba(245, 245, 245);
    }

    .navbar .top-head {
        background-color: #fff;
    }

    .s-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .base {
        display: flex;
        padding: 10px;
        justify-content: flex-start;
    }

    .headIcon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-top: -40px;
        border:3px solid #eee;
        z-index: 99;
    }

    .base p {
        margin-left: 10px;
    }
    .art-box{
        border: none;
        margin: 0;
    }
    .data {
        background-color: #fff;
        margin-top: 10px;
        padding: 0;
    }
    .layui-tab {
        margin: 0;
    }
    .article-list{
        padding:0  10px;
    }
    .article-list li:not(:last-child){
        border-bottom: 1px solid #eee;
    }
</style>
<div class="layout clearfix">
    <!-- <h2 class="s-text">[{$userData.profile.nickname}]的空间</h2> -->
    <div class="navbar">
        <div class="top-head">
            <div class="info-container">
                <img src="__IMG__/other/profile_bg.jpg" alt="bg" class="bg">
                <div class="s-container">
                    <div class="base">
                        <a href="">
                            <img src="{$userData.profile.head_icon|default='__IMG__/other/no-img.jpg'}"
                                alt="{$userData.profile.nickname}" class="headIcon">
                        </a>
                        <p>
                            <span class="layui-font-20 layui-font-blue ">{$userData.profile.nickname}</span>
                            {if $userData.role}
                            <span class="layui-badge layui-bg-red">{$userData.role}</span>
                            {/if}
                            <span
                                class="layui-badge layui-bg-{$userData.is_vip == 1 ? 'orange' : 'blue'}">{$userData.is_vip
                                == 1 ?
                                'VIP' : '普通会员'}</span>
                            <br>
                            <span class="layui-font-gray layui-font-13">{$userData.profile.signature}</span>
                        </p>
                    </div>
                    <div class="operate">
                        <button type="button" class="layui-btn layui-bg-{$userData.follow == true ? 'orange' : 'blue'} layui-btn-sm" onclick="follow(this, '{$userData.profile.id}')">{$userData.follow  == true ? '已关注' : '+关注'}</button>
                        <button class="layui-btn layui-bg-blue layui-btn-sm" onclick="addFriend()">加好友</button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" onclick="sendMsg()">发消息</button>
                    </div>
                </div>

            </div>
        </div>